<template>
  <div class="warning_module_container">
    <div class="warning_module_title" flex="main:justify cross:center">
      <div flex="cross:center">
        <img style="margin-right:10px" src="@/assets/img_qingqin/module7/title_icon.png">
        100万以上企业税收异常( <span class="color_danger">{{ tableList.length }}</span> )
      </div>
      <span>预警指标增加/降低 <b>30%</b></span>
    </div>
    <div flex="main:right" style="margin:10px 0">
      <img src="@/assets/img_qingqin/module7/title_text_mark.png">
    </div>
    <dv-decoration-2 style="width:100%;height:5px;" />
    <dv-decoration-2 style="width:100%;height:5px;transform:rotate(180deg)" />

    <div class="warning_table_layout">
      <div class="item header" flex="main:justify">
        <div v-for="(item,index) in headerList" :key="index" class="text_over" :style="`width:${item[1]};`">{{ item[0] }}</div>
      </div>
      <div class="body warning_scroll_layout">
        <div v-for="(item,index) in tableList" :key="index" class="item" flex>
          <div v-for="(subItem,i) in headerList" :key="i+''+index" :style="`width:${subItem[1]}`" class="text_over " @click="handleItem(item)">
            <span :style="{color:subItem[2] === 'processStatus'&& item[subItem[2]] === '已处理'?'yellow':''}">{{ item[subItem[2]]||'--' }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="table_layout" />
    <Modal ref="modal" v-model="showModal" :title="`${itemContent.company}`">
      <div class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content">
          <div flex>
            <div class="flex_1">公司名称：<span>{{ itemContent.company || '--' }}</span> </div>
            <div class="flex_1">公司地址：<span>{{ itemContent.dz || '--' }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">异常描述：<span>{{ itemContent.exceptionDesc || '--' }}</span> </div>
            <div class="flex_1">异常原因：<span>{{ itemContent.exceptionDetail || '--' }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">统一社会信用代码：<span>{{ itemContent.tyshxydm }}</span> </div>
            <div class="flex_1">时间：<span>{{ itemContent.inDate }}</span> </div>
          </div>
          <div flex="main:center">
            <div class="back_btn" @click="handleClick"> 定位社区 </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { listTaxException } from '@/api/home'
import Modal from '@/components/Modal/index'
export default {
  components: { Modal },
  data() {
    return {
      headerList: [
        ['时间', '250px', 'inDate'],
        ['内容', '420px', 'exceptionDesc'],
        ['预警对象', '300px', 'company'],
        ['处理状态', '200px', 'processStatus'],
        ['管理人', '110px', 'admin']
      ],
      tableList: [
      ],
      currYear: new Date().getFullYear() - 1,
      showModal: false,
      itemContent: {}
    }
  },
  created() {
    listTaxException({ year: this.currYear }).then(res => {
      this.tableList = res.data.sort((a, b) => new Date(b.inDate) - new Date(a.inDate))
    })
  },
  methods: {
    handleItem(item) {
      this.showModal = true
      this.itemContent = item
    },
    handleClick() {
      this.showModal = false
      // this.$refs.modal.close()
      this.$nextTick(() => {
        this.$router.push({ path: 'location', query: { address: this.itemContent.dz } })
      })
      //
    }
  }
}
</script>
